<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传递复杂数据</title>
</head>
<body>
<!-- 嵌套关系：app 嵌套 my-list -->
<div id="app">
    <h2>传智播客已开设如下课程：</h2>
    <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons -->
    <my-list :items="lessons"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

    /*
    - 这个子组件可以对 items 进行迭代，并输出到页面。
    - 但是组件中并未定义items属性。
    - 通过props来定义需要从父组件中接收的属性
    - items：是要接收的属性名称
        - type：限定父组件传递来的必须是数组，否则报错
        - default：默认值
    */

    const myList = {
        template: '\
        <ul>\
        	<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
        </ul>\
        ',
        props: { // 通过props来接收父组件传递来的属性
            items: { // 这里定义“items属性”
                type: Array,// 类型：要求必须是“Array类型”
                default: [] // 默认：如果父组件没有传，那么给定默认值是 []
            }
        }
    }

    var app = new Vue({
        el: "#app",
        components: {
            myList // 当key和value一样时，可以只写一个
        },
        data: {
            lessons: [
                {id: 1, name: 'java'},
                {id: 2, name: 'php'},
                {id: 3, name: 'ios'},
            ]
        }
    })

</script>
</body>
</html>
